<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="learn javascript by www.liaoxuefeng.com">
    <title>Mini Excel</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <script src="/static/js/jquery-3.1.0.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/vue-2.5.16.js"></script>
    <script src="/static/js/vue-resource-1.5.1.js"></script>
    <script src="/static/js/excel.js"></script>
    <style>

#sheet {
    table-layout: fixed;
    min-width: auto;
    margin-bottom: 0px;
}

#sheet tr>th {
    width: 150px;
    background-color: #e6e6e6;
}

#sheet tr>th:first-child {
    width: 50px;
    background-color: #e6e6e6;
}

#sheet tr>td {
    width: 150px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: none;
    word-wrap: normal;
    white-space: nowrap;
}

#sheet tr>td:first-child {
    width: 50px;
}

    </style>
    <script>

var ID = 'S-001';
var COLUMNS = 10;

function createHeader() {
    var hdr = [{
        row: 0,
        col: 0,
        text: ''
    }];
    for (var i=1; i<=COLUMNS; i++) {
        hdr.push({
            row: 0,
            col: i,
            text: String.fromCharCode(64 + i)
        });
    }
    return hdr;
}

function createRow(rIndex) {
    var row = [{
        row: rIndex,
        col: 0,
        contentEditable: false,
        text: '' + rIndex,
        align: 'left'
    }];
    for (var i=1; i<=COLUMNS; i++) {
        row.push({
            row: rIndex,
            col: i,
            contentEditable: true,
            text: '',
            align: 'left'
        });
    }
    return row;
}

function createRows() {
    var rows = [];
    for (var i=1; i<=100; i++) {
        rows.push(createRow(i));
    }
    return rows;
}

$(function () {
    var vm = new Vue({
        el: '#sheet',
        data: {
            title: 'New Sheet',
            header: createHeader(),
            rows: createRows(),
            selectedRowIndex: 0,
            selectedColIndex: 0
        },
        methods: {
            open: function () {
                var that = this;
                that.$resource('/api/sheets/' + ID).get().then(function (resp) {
                    resp.json().then(function (result) {
                        that.title = result.title;
                        that.rows = result.rows;
                    });
                }, function (resp) {
                    alert('Failed to load.');
                });
            },
            save: function () {
                this.$resource('/api/sheets/' + ID).update({
                    title: this.title,
                    rows: this.rows
                }).then(function (resp) {
                    console.log('saved ok.');
                }, function (resp) {
                    alert('failed to save.');
                });
            },
            focus: function (cell) {
                this.selectedRowIndex = cell.row;
                this.selectedColIndex = cell.col;
            },
            change: function (e) {
                var
                    rowIndex = this.selectedRowIndex,
                    colIndex = this.selectedColIndex,
                    text;
                if (rowIndex > 0 && colIndex > 0) {
                    text = e.target.innerText;
                    this.rows[rowIndex - 1][colIndex].text = text;
                }
            }
        }
    });
    window.vm = vm;

    var setAlign = function (align) {
        var
            rowIndex = vm.selectedRowIndex,
            colIndex = vm.selectedColIndex,
            row, cell;
        if (rowIndex > 0 && colIndex > 0) {
            row = vm.rows[rowIndex - 1];
            cell = row[colIndex];
            cell.align = align;
        }
    };

    $('#cmd-open').click(function () {
        vm.open();
    });

    $('#cmd-save').click(function () {
        vm.save();
    });

    $('#cmd-left').click(function () {
        setAlign('left');
    });

    $('#cmd-center').click(function () {
        setAlign('center');
    });

    $('#cmd-right').click(function () {
        setAlign('right');
    });

    $('#cmd-download').click(function () {
        var
            fileName = vm.title + '.xls',
            a = document.createElement('a');
        a.setAttribute('href', 'data:text/xml,' + encodeURIComponent(makeXls(vm.rows)));
        a.setAttribute('download', fileName);
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    });

    $('#toolbar button').focus(function () {
        $(this).blur();
    });
});
    </script>
</head>

<body style="overflow:hidden">
    <header class="navbar navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="#0" class="navbar-brand">Sheet</a>
            </div>
            <nav id="toolbar" class="collapse navbar-collapse">
                <div class="btn-group">
                    <button id="cmd-open" type="button" class="btn btn-default navbar-btn"><i class="glyphicon glyphicon-folder-open"></i> Open</button>
                    <button id="cmd-save" type="button" class="btn btn-default navbar-btn"><i class="glyphicon glyphicon-floppy-disk"></i> Save</button>
                    <button id="cmd-download" type="button" class="btn btn-default navbar-btn"><i class="glyphicon glyphicon-save"></i> Download</button>
                </div>
                <div class="btn-group">
                    <button id="cmd-left" type="button" class="btn btn-default navbar-btn"><i class="glyphicon glyphicon-align-left"></i></button>
                    <button id="cmd-center" type="button" class="btn btn-default navbar-btn"><i class="glyphicon glyphicon-align-center"></i></button>
                    <button id="cmd-right" type="button" class="btn btn-default navbar-btn"><i class="glyphicon glyphicon-align-right"></i></button>
                </div>
            </nav>
        </div>
    </header>

    <div id="important" style="position:absolute; margin:50px 0 35px 0; left: 0; right: 0; top: 0; bottom: 0; overflow:scroll;">
        <table id="sheet" class="table table-bordered">
            <thead>
                <tr>
                    <th v-for="cell in header" v-on:click="focus(cell)" v-text="cell.text"></th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="tr in rows">
                    <td v-for="cell in tr" v-on:click="focus(cell)" v-on:blur="change" v-bind:contenteditable="cell.contentEditable" v-bind:style="{ textAlign: cell.align }" v-text="cell.text"></td>
                </tr>
            </tbody>
        </table>
    </div>

    <footer class="navbar navbar-fixed-bottom" style="background-color:#e7e7e7; height:35px; min-height:35px; overflow:hidden;">
        <div class="container-fluid">
            <nav class="collapse navbar-collapse">
                <p class="text-right" style="padding-top:5px">
                    <a target="_blank" href="http://www.liaoxuefeng.com">Website</a> -
                    <a target="_blank" href="https://github.com/michaelliao/learn-javascript">GitHub</a> -
                    <a target="_blank" href="http://weibo.com/liaoxuefeng">Weibo</a>
                    This JavaScript course is created by <a target="_blank" href="http://weibo.com/liaoxuefeng">@廖雪峰</a>.
                    Code licensed <a target="_blank" href="https://github.com/michaelliao/learn-javascript/blob/master/LICENSE">Apache</a>.
                </p>
            </nav>
        </div>
    </footer>
</body>

</html>
